<!-- pages/components/scroll/scroll.vue -->
<template>
	<view class="wrapper">
		<!-- 1. 纵向滚动 -->
		<view class="title">纵向滚动 (scroll-y)</view>
		<!-- 
		  要点: 
		  1. 必须设置 scroll-y="true"
		  2. 必须给 scroll-view 一个固定的高度(height)
		-->
		<scroll-view class="scroll-v" scroll-y="true">
			<view class="item" style="background-color: #007aff;">A</view>
			<view class="item" style="background-color: #4cd964;">B</view>
			<view class="item" style="background-color: #f0ad4e;">C</view>
			<view class="item" style="background-color: #dd524d;">D</view>
		</scroll-view>

		<!-- 2. 横向滚动 -->
		<view class="title">横向滚动 (scroll-x)</view>
		<!-- 
		  要点: 
		  1. 必须设置 scroll-x="true"
		  2. 必须给 scroll-view 一个固定的高度(height)
		  3. (关键) 必须给内部的子元素设置 white-space: nowrap，防止它们自动换行
		-->
		<scroll-view class="scroll-h" scroll-x="true">
			<view class="item-h" style="background-color: #007aff;">1</view>
			<view class="item-h" style="background-color: #4cd964;">2</view>
			<view class="item-h" style="background-color: #f0ad4e;">3</view>
			<view class="item-h" style="background-color: #dd524d;">4</view>
			<view class="item-h" style="background-color: #8a6de9;">5</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		}
	}
</script>

<style>
.wrapper {
	padding: 15px;
}
.title {
	font-size: 16px;
	font-weight: bold;
	padding: 10px 5px;
	border-bottom: 1px solid #f0f0f0;
	margin-bottom: 10px;
}

/* 纵向滚动 */
.scroll-v {
	height: 200px; /* 必须有固定高度 */
	border: 1px solid #ccc;
}
.item {
	height: 80px; /* 故意让内容超出 */
	line-height: 80px;
	text-align: center;
	font-size: 20px;
	color: white;
}

/* 横向滚动 */
.scroll-h {
	height: 120px; /* 必须有固定高度 */
	border: 1px solid #ccc;
	/* 关键：设置内部元素不换行 */
	white-space: nowrap; 
}
.item-h {
	width: 120px; /* 固定宽度 */
	height: 120px;
	line-height: 120px;
	text-align: center;
	font-size: 20px;
	color: white;
	/* 关键：让它们在同一行显示 */
	display: inline-block; 
}
</style>